<template>
<div class="main">
  <div>{{all_myrest_ProductDetail==null?'':''}}</div>
  <div class="part">
    <div class="header">
      <div class="flexL">
        <div class="icon"><img src="../assets/images/payResultSuccIcon.png" /></div>
      </div>
      <div class="flexR">参与夺宝成功</div>
    </div>
    <div class="intro">请等待系统为您揭晓</div>
    <div class="btnbox clear">
      <div class="continue" v-on:click="goon()">继续夺宝</div>
      <div class="record" v-on:click="jilu()">夺宝记录</div>
    </div>
  </div>
  <div class="part">
    <div class="text">成功参与1件商品，本期共参与<span class="rencival">{{usercount}}</span>人次</div>
    <div class="info">
      <div class="titlebox">
        <div class="title">{{ProductDetailData==null?'':ProductDetailData.productName}}</div>
        <div class="renci"><span>{{ProductDetailData==null?'':ProductDetailData.spellbuyCount}}</span>人次</div>
      </div>
      <div class="qihao">商品期号：<span>{{ProductDetailData==null?'':ProductDetailData.productPeriod}}</span></div>
    </div>
  </div>

</div>
</template>
<script>
  import stores from './mystore.js'
  import Vue from 'vue';
  import { XButton, XInput,Group, Tab, TabItem } from 'vux'
  import { mapGetters,mapActions } from 'vuex'
  import sha1 from 'js-sha1'

  export default {
      data(){
          return {
              ProductDetailData:'',
              duoid:'',
              usercount:'',
              mypayload:{
              },
              buypayload:{
              },

              detailsPayload:{
                  url:'duodata',
                  actionName:"ProductDetail",
                  postData: {
                      spellbuyProductId:"",
                      //password:"112233",
                      //treeView:"true"
                  }
              },

              QueryUserPayload:{
                  url:'baseapi',
                  actionName:"QueryUserInfo",
                  postData: {
                      //mobile:"18616717008",
                      //password:"112233",
                      //treeView:"true"
                }
              },

          }
      },

      computed:{
          all_myrest_ProductDetail(){
              var dataval=this.$store.getters.all_restful_ProductDetail;
              if(dataval){
                  this.ProductDetailData=dataval.body;
                  return dataval.body
              }else{
                return null
              }
          },
//          all_myrest_QueryUserInfo(){
//              var dataval=this.$store.getters.all_restful_QueryUserInfo;
//              if(dataval){
//                  return dataval
//              }else{
//                  return null
//              }
//              //return dataval;
//          },
//          all_myrest(){
//              return this.$store.getters.all_logindata
//          },

      },
      created (){
          var duoid=this.$route.params.duoid;
          var usercount=this.$route.params.usercount;
          var resultMark=this.$route.params.resultMark;
          this.duoid=this.detailsPayload.postData.spellbuyProductId=duoid;
          this.usercount=usercount;
          this.cntReady();
          //console.log('hahahahhahahahah'+this.cntReady())   resultMark
      },

      methods:{
          doesh (){
            //this.$store.commit('restful_api',this.QueryUserPayload)
          },
          cntReady(){
              this.$store.commit('restful_api',this.detailsPayload);
           },
          goon:function(){
             // this.$router.push('/DuoSuccess/'+this.duoBaoId+'/'+dataval.body.userIdBuyCount+'/successMark')
              this.$router.push('/OneIndex/')
          },
          jilu:function(){
              this.$router.push('/Jilu/')
          },
          ...mapActions([
              'increment',
              'decrement',
              'incrementIfOdd'
          ]),

      },
      components: { XButton, Group, XInput, Tab, TabItem }

  }

</script>

<style scoped>
    *{ margin:0; padding:0;}
    html{ background-color:#fbfbfb;}
    body,html,main{ width:100%; font-size:12px;}
    div img{ width:100%;}

    .part{  background-color:#fff; margin-bottom:15px;}
    .rencival{ color:red;}
    .header{ display:box; display:-webkit-box; padding-top:30px;}
    .flexL,.flexR{ box-flex:1; -webkit-box-flex:1;}
    .flexL{ text-align:right; padding-left:20px; }
    .flexR{ font-size:28px; color:#00b221; line-height:28px; padding-left:10px; }
    .header .icon{ width:30px; height:30px; float:right;}
    .header div{ }
    .intro{ color:#999; text-align:center; font-size:14px; padding:15px 0 10px 0;}

    .btnbox{ padding-top:15px; padding-bottom:20px;}
    .clear:after{ content:''; width:100%; height:0; clear:both; display:block;}
    .btnbox div{ width:38.2%; float:left; text-align:center; border:1px solid #db3652; padding:10px; border-radius:4px; margin-left:4%;}
    .btnbox div:nth-child(1){ background-color:#db3652; color:#fff;}
    .btnbox div:nth-child(2){ color:#db3652;}

    .part .text{ padding:15px 10px; border-bottom:1px solid #f1eeec; font-size:12px; color:#999;}
    .part .info{ padding:10px;}
    .titlebox{ display:box; display:-webkit-box;}
    .titlebox .title{ box-flex:1; -webkit-box-flex:1;}
    .titlebox .title{ font-size:18px; color:#333; font-weight:bold; padding:3px 0 10px 0;}
    .titlebox .renci{ text-align:right; color:#999; width:90px; padding-top:3px;}
    .titlebox span{ color:#d52e4a;}
    .qihao,.haoma{ font-size:12px; color:#999; margin-bottom:3px;}

</style>
